<!--
 * @Author: your name
 * @Date: 2021-01-14 09:40:48
 * @LastEditTime: 2021-01-14 10:07:21
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\powerreset\powerreset.vue
-->
<template>
    <div class="device-powerreset-box">
        <div class="content-main-box">
            <div class="header-box">
                电价清零
            </div>
            <div class="subContent-box">
                <p class="red">警告！该功能将导致不可逆的历史电价清零，清零后将无法恢复，请慎用。</p>
                <el-form ref="form" :model="form" label-width="100px" >
                    <el-row :gutter="20">
                        <el-col :span="16" :offset="4">
                            <el-form-item label="逆变器SN" prop="inverterSn" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                <el-input v-model="form.inverterSn" ></el-input>
                            </el-form-item>
                            <el-form-item label="截止日期" prop="endTime" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                <el-date-picker
                                v-model="form.endTime"
                                type="date"
                                :placeholder="$t('selectDate')"
                                value-format='yyyy-MM-dd'
                                :picker-options="pickerOptions"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" style="text-align:center;margin-top:15px;">
                        <el-popconfirm
                        :confirm-button-text="$t('sure')"
                        :cancel-button-text="$t('cancel')"
                        title="警告！该功能将导致不可逆的历史电价清零，清零后将无法恢复!确定要执行此操作吗?"
                        @confirm="save('form')"
                        >
                            <el-button slot="reference">电价清零</el-button>
                        </el-popconfirm>
                    </el-row>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    components: {

    },
    props: {

    },
    data() {
        return {
            form:{
                inverterSn:'',
                endTime:'',
            },
            pickerOptions:{ //禁用今天之后的时间
                disabledDate(time) {
                    return time.getTime() > Date.now()
                }
            },
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {

    },
    methods: {
        async increaseClear(){
            let res = await this.API.increaseClear({
                inverterSn:this.form.inverterSn,
                endTime:this.form.endTime,
            })
            if(this.comm.showMsg(res.success)){
                this.form.inverterSn = ''
                this.form.endTime = ''
            }
        },
        save(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                  this.increaseClear()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
    },
};
</script>

<style  lang="less" scoped>
.device-powerreset-box{
    .content-main-box{
        width: 600px;
        height: 350px;
        background-color: #EFEFEF;
        margin: 0px auto;
        .header-box{
            background-color: #5A5A5A;
            width: 100%;
            padding: 8px 5px;
            color: #fff;
            box-sizing: border-box;
        }
        .red{
            color: red;
            text-align: center;
            font-size: 13px;
        }
    }
}
</style>
